<template>
  <div style="padding: 10px;">
    <div :style="title">观众流量</div>
    <el-row>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>预约人数</div>
          <div>{{subscribeNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>历史观看人数</div>
          <div>{{maxOnUserNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>观看人次</div>
          <div>{{lookSecond}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>新增粉丝数</div>
          <div>{{createUserNum}}</div>
        </div>
      </el-col>
      <!--<el-col :span="4" :style="padding">-->
      <!--<div :style="block">-->
      <!--<div>人均观看时长(分钟)</div>-->
      <!--<div>{{duration}}</div>-->
      <!--</div>-->
      <!--</el-col>-->
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>实时在线人数</div>
          <div>{{lookNum}}</div>
        </div>
      </el-col>
    </el-row>
    <div :style="[title,marginTop]">直播互动</div>
    <el-row>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>评论人数</div>
          <div>{{commentUserNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>评论数</div>
          <div>{{commentNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>点赞人数</div>
          <div>{{praiseUserNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>点赞数</div>
          <div>{{praiseNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>关注人数</div>
          <div>{{followUserNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>取关人数</div>
          <div>{{offFollowUserNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>分享人数</div>
          <div>{{shareUserNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>分享次数</div>
          <div>{{shareNum}}</div>
        </div>
      </el-col>
    </el-row>
    <div :style="[title,marginTop]">交易转化</div>
    <el-row>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>加入人数</div>
          <div>0</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>加购人数</div>
          <div>0</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>支付人数</div>
          <div>0</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>支付订单数</div>
          <div>0</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>支付金额</div>
          <div>0</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>客单价</div>
          <div>0</div>
        </div>
      </el-col>
    </el-row>
    <div :style="[title,marginTop]">回放数据</div>
    <el-row>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>观看人数</div>
          <div>{{playbackUserNum}}</div>
        </div>
      </el-col>
      <el-col :span="4" :style="padding">
        <div :style="block">
          <div>观看次数</div>
          <div>{{playbackData}}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: "LiveInfoDataLive",
    components: {
    },
    data() {
      return {
        title:{
          'font-size':'24px',
          'margin-bottom':'15px'
        },
        block:{
          'background-color': '#f1f1f1',
          'padding': '10px 20px 10px 20px',
          'line-height': '30px',
          'font-size': '16px',
          'font-family': '黑体'
        },
        padding: {
          'padding':'8px'
        },
        marginTop: {
          'margin-top':'20px'
        },
        commentNum:0,
        praiseNum:0,
        lookNum:0,
        maxOnUserNum:0,
        shareUserNum:0,
        shareNum:0,
        followUserNum:0,
        offFollowUserNum:0,
        subscribeNum:0,
        lookSecond:0,
        createUserNum:0,
        duration:0,
        commentUserNum:0,
        praiseUserNum:0,
        playbackData:0,
        playbackUserNum:0
      }
    },
    mounted: function () {

    },
    methods: {
      getPData(row){
        this.liveId=row.id;
        this.anchorId=row.anchorId;
        this.getDataList(row)
      },
      getDataList(row) {
        let params={};
        params.id=this.liveId;
        params.anchorId=this.anchorId;
        params.number=row.number
        this.utils.request.liveRequest({
          url: '/api/v1/liveData/getLiveData',
          method:'get',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code == "0") {
            this.praiseNum=data.data.praiseNum;
            this.commentNum=data.data.commentNum;
            this.lookNum=data.data.lookNum;
            this.maxOnUserNum =data.data.maxOnUserNum;
            this.shareUserNum=data.data.shareUserNum;
            this.shareNum=data.data.shareNum;
            this.followUserNum=data.data.followUserNum;
            this.offFollowUserNum=data.data.offFollowUserNum;
            this.subscribeNum=data.data.subscribeNum;
            this.lookSecond=data.data.lookSecond;
            this.createUserNum=data.data.createUserNum;
            this.commentUserNum=data.data.commentUserNum;
            this.praiseUserNum=data.data.praiseUserNum
            if(data.data.lookSecond===0 || data.data.duration===0){
              this.duration=0;
            }else {
              console.log(data.data.duration)
              this.duration=Math.floor((data.data.duration/data.data.lookSecond)*100)/100;
            }
            this.playbackData=data.data.playbackData
            this.playbackUserNum=data.data.playbackUserNum
          }
        })
      },
    }
  }
</script>
<style scoped lang="scss">

</style>
